<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  .clear{clear: both;}
  #box{width: 530px;height: 80px;background: #fff;margin: 100px auto;padding: 10px;}
   #box > ul{background: #215A9C;height: 40px;line-height: 40px;padding-left:10px;border-radius: 5px;width: 520px;}
  #box > ul > li{float: left;list-style: none;color: #fff;border-right: 1px solid #C6D6E7;padding: 0 5px;position: relative;}
  span{line-height: 30px;padding: 0 15px;display: inline-block;height: 30px;margin-top: 5px;border-radius: 5px;cursor: pointer;}
  li > ul{height: 30px;border: 1px solid #94B5D6;border-radius: 5px;padding: 0 15px;line-height: 30px;position: absolute;left: -10px;top: 45px;display: none;}
  li > ul > li{border-right: 1px solid #94B5D6;height: 15px;line-height: 12px;display: inline-block;}
  li a{padding: 0 5px;color: #94B5D6;font-size: 12px;text-decoration: none;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementById('box');
      var Span = Box.getElementsByTagName('span');
      var Nav = Box.getElementsByClassName('nav');
      var a = Box.getElementsByTagName('a');
      var num = 0;
      var timer = null;
      Span[num].style.background = '#638CB5';
      function fun(n){
        for (var i = 0; i < Span.length; i++) {
           Span[i].style.background = '';
        };
        for (var i = 0; i < Nav.length; i++) {
            Nav[i].style.display = 'none'
        };
        Span[n].style.background = '#638CB5';
        Nav[n].style.display = 'block'
      }
      function abc(){
        timer = setTimeout(function (){
          for (var i = 0; i < Nav.length; i++) {
            Nav[i].style.display = "none"
          };
        },1000)
      }
      for (var i = 0; i < Span.length; i++){
        Span[i].index = i;
        Span[i].onmouseover = function(){
          clearTimeout(timer);
          fun(this.index);
        }
        Span[i].onmouseout = abc;
      };
      for (var i = 0; i < Nav.length; i++) {
        Nav[i].index = i;
        Nav[i].onmouseover = function(){
          clearTimeout(timer);
          fun(this.index);
        }
        Nav[i].onmouseout = abc;
      };
      for (var i = 0; i < a.length; i++){
        a[i].index = i;
        a[i].onmouseover = function(){
          a[this.index].style.textDecoration = "underline";
        }
        a[i].onmouseout = function(){
          a[this.index].style.textDecoration = "none";
        }
      };
    }
  </script>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <span>首页</span>
        <ul class="nav" style="width:250px;">
          <li><a href="#">最近更新</a></li>
          <li><a href="#">活动</a></li>
          <li><a href="#">报名试听</a></li>
          <li><a href="#">学员反馈</a></li>
        </ul>
      </li>
      <li>
        <span>关于我们</span>
        <ul class="nav" style="width:260px;">
          <li><a href="#">妙味讲师</a></li>
          <li><a href="#">培训方式</a></li>
          <li><a href="#">培训理念</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </li>
      <li>
        <span>作品</span>
        <ul class="nav" style="width:260px;">
          <li><a href="#">妙味讲师</a></li>
          <li><a href="#">培训方式</a></li>
          <li><a href="#">培训理念</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </li>
      <li style="border:none">
        <span>博客</span>
        <ul class="nav" style="width:320px;left:-100px;">
          <li><a href="#">JS教程</a></li>
          <li><a href="#">弹出层效果</a></li>
          <li><a href="#">3D球面标签云</a></li>
          <li><a href="#">window计算器</a></li>
        </ul>
      </li>
      <li style="border:none;float:right">
        <span><<更多</span>
      </li>
      <div class="clear"></div>
    </ul>
  </div>
</body>
</html>